import React from 'react';
import style from './index.module.scss';
import PropTypes from 'prop-types';

interface filterProps {
    addChart: ( type ) => void;
    menuList: Array<any>;
}

const EditTopMenu: React.FC<filterProps> = props => {
	// console.log( props );
	const { menuList, addChart } = props;
	return (
		<div className={ style.charts_menu_container }>
			{
				menuList.map( t => {
					return (
						<div key={ t.key } className={ style.charts_menu_item } onClick={ () => addChart( t.type ) }>
							<div><img className={ style.charts_menu_icon } src={ t.icon } alt=""/></div>
							<div key={ t.key } className={ style.charts_menu_title }>{ t.name }</div>
						</div>

					);
				} )
			}
		</div>
	);
};

EditTopMenu.propTypes = {
	addChart: PropTypes.func.isRequired,
	menuList: PropTypes.array.isRequired
};

export default React.memo( EditTopMenu );
